<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>添加消息模板</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="../../../../elementUI/index.css">
    <link rel="stylesheet" href="../../../../css/index.css">
</head>
<style>
    .margin-top {
        display: flex;
        /* flex-direction: column; */
        border: 1px solid #eee;
        padding: 20px;
    }

    .moban {
        width: 100%;
    }

    .select {
        width: 100%;
    }

    .item {
        display: flex;
    }

    .left {
        width: 30%;
        border: 1px solid #eeeeee;
        text-align: center;
        align-content: center;
        background-color: #fafafa;
        color: gray;
    }

    .right {
        width: 70%;
    }
</style>

<body>
    <div id="app" class="minWidth">
        <el-form :model="formData" ref="contract" inline-message="true" style="width: 100%" >
            <div class="table_titel">
                <div class="titel">选择消息模板</div>
            </div>
            <el-descriptions :column="2" border size="small">
                <el-descriptions-item label="发送消息模板">
                    <el-form-item prop="selectOne">
                        <el-select v-model="form.selectOne" placeholder="请选择发送消息模板" style="width: 100%;"
                            @change="handleTemplateChange">
                            <el-option v-for="(item, index) in template" :key="index" :label="item.Title"
                                :value="item.Title">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-descriptions-item>
                <el-descriptions-item label="选择接口">
                    <el-form-item prop="selectTwo">
                        <el-select v-model="form.selectTwo" placeholder="请选择接口" style="width: 100%;"
                            @change="handleInterfaceChange">
                            <el-option v-for="(item, index) in selectOptionsTwo" :key="index"
                                :label="item.interface_Name" :value="item.interface_URL">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-descriptions-item>
                <el-descriptions-item label="选择接收角色">
                    <el-form-item prop="role">
                        <el-select multiple v-model="form.role" placeholder="请选择角色(可多选)" style="width: 100%;"
                            @change="handleRolesChange">
                            <el-option v-for="(item, index) in roles" :key="index" :label="item.Role_Name"
                                :value="item.Role_Name">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-descriptions-item>
            </el-descriptions> 
            <div class="table_titel">
                <div class="titel">
                    配置消息模板
                    <span style="color:red;" v-if="templateData.length == 0">（请选择消息模板）</span>
                </div>
            </div>
            <el-descriptions :column="1" border size="small" >
                <el-descriptions-item :label="item.param_key" v-for="(item, index) in templateData" :key="index">
                    <el-form-item>
                        <el-select :disabled="!item.param_value" class="select" v-model="item.selectedOption" placeholder="请选择">
                            <el-option v-for="(option, idx) in selectedInterface" :key="idx" :label="option" :value="idx"></el-option>
                        </el-select>
                    </el-form-item>
                </el-descriptions-item>
            </el-descriptions>
            <el-form-item class="form-operation">
                <el-button @click="window.history.back()">返回</el-button>
                <el-button type="primary" :loading="loading" @click="submitForm('contract')">提交</el-button>
            </el-form-item>
        </el-form>
    </div>
    <script type="text/javascript" src="../../../../js/jquery-3.6.0.min.js"></script>
    <script type="text/javascript" src="../../../../js/jquery.cookie.js"></script>
    <script type="text/javascript" src="../../../../js/vue.min.js"></script>
    <script type="text/javascript" src="../../../../elementUI/index.js"></script>
    <script type="text/javascript" src="../../../../js/utils.js"></script>
    <script type="text/javascript" src="../../../../js/ID_Validity.js"></script>
    <script type="text/javascript" src="./js/Add.js"></script>
    <script type="text/javascript">

    </script>
</body>

</html>